<template>
	<view class="content">
		<view class="list flex" v-for="(item,i) in list" :key="i">
			<view style="width: 80%;">
				<view class="username">{{item.username}}</view>
				<view class="flex userinfo">
					<view class="tipColor">身份证</view>
					<view class="infoStyle">{{item.card_no}}</view>
				</view>
				<view  class="flex userinfo">
					<view class="tipColor">手机号</view>
					<view class="infoStyle" >{{item.mobile}}</view>
				</view>
			</view>
			<view @click="del" :data-id="item.id">
				<u-icon name="trash-fill" color="#eb7068" size="50"></u-icon>
			</view>
		</view>
		<view class="add" @click="add">
			添加出行人
		</view>
		<u-modal :showCancelButton="true" :show="delModal.show" @confirm="delConfirm" @cancel="delCancel" :title="delModal.title" :content='delModal.content'></u-modal>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				list:[],
				delId : 0,
				delModal:{
					show:false,
					title:'删除',
					content : '确定执行删除操作吗'
				}
			}
		},
		methods: {
			getExchangeList(){
				http.POST('user_vip/exchange').then(res=>{
					if(res.code == 1){
						this.list = res.data
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},
			add(){
				uni.navigateTo({
					url:'/pages/exchange/add'
				})
			},
			del(v){
				this.delModal.show = true;
				this.delId = v.currentTarget.dataset.id;
			},
			delConfirm(){
				http.POST('user_vip/delExchange',{'id':this.delId}).then(res=>{
					if(res.code == 1){
						this.getExchangeList()
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
				this.delModal.show = false;
				
			},
			delCancel(){
				this.delId = 0;
				this.delModal.show = false;
				
			}
		},
		created(){
			this.getExchangeList()
		}
	}
</script>

<style>
	.content { padding: 20rpx;}
	.flex{display: flex;}
	.username { font-weight: bold;}
	.list { box-shadow: 0 0 4rpx 3rpx #eeeeee; margin-bottom: 15rpx; font-size: 35rpx; text-align: left; padding: 20rpx; border:1px solid #eee; justify-content: space-between; align-items: center;}
	.userinfo { justify-content: space-between; margin: 10rpx 0; text-align: left;}
	.add { 
		text-align: center;  color:#fff; height: 70rpx; line-height: 70rpx; position: absolute; bottom: 50rpx;
		width: 80%; left: 10%; border-radius: 50rpx; background-color: #58b8f2;
	 }
	 .tipColor {color: #858a8e;}
	 .infoStyle{
		  flex-grow: 2; margin-left: 20rpx;
	 }
</style>
